<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉菜单</title>
	</head>
	<style>
		.dropbtn {
		    background-color: #4CAF50;
		    color: white;
		    padding: 16px;
		    font-size: 16px;
		    border: none;
		    cursor: pointer;
		}
		.dropdown {
		  position: relative;
		  display: inline-block;
		}
		
		.dropdown-content {
			display: none;
		    position: absolute;
		    background-color: #f9f9f9;
		    min-width: 160px;
		    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		
		.dropdown-content a {
		    color: black;
		    padding: 12px 16px;
		    text-decoration: none;
		    display: block;
		}
		
		.dropdown-content a:hover {background-color: #f1f1f1}
		
		.dropdown:hover .dropdown-content {
		    display: block;
		}
		
		.dropdown:hover .dropbtn {
		    background-color: #3e8e41;
		}
		.select_div{
			justify-items: center;
		}
		.select_div select{
			appearance: none; /* 隐藏默认外观 */
			-webkit-appearance: none; /* 隐藏默认外观 */
			-moz-appearance: none; /* 隐藏默认外观 */
			  
			width: 200px;
			height: 30px;
			outline: #3e8e41;
		}
		.select_div select>option{
			padding: 5px; /* 调整选项的内边距 */
		}
	</style>
	<body>
		<div class="dropdown">
		  <button class="dropbtn">下拉菜单</button>
		  <div class="dropdown-content">
		    <a href="http://www.runoob.com">菜鸟教程 1</a>
		    <a href="http://www.runoob.com">菜鸟教程 2</a>
		    <a href="http://www.runoob.com">菜鸟教程 3</a>
		  </div>
		</div>
		<div class="select_div">
			<select>
				<option> 下拉1</option>
				<option> 下拉2</option>
			</select>
		</div>
	</body>
</html>